<template>
  <div class="container">
    <br>
    <button @click="router.back()" class="btn btn-sm btn-outline-primary"><font-awesome-icon :icon="['fas', 'arrow-left']" /> 返回</button>
    <br><br>
    <div class="row">
      <div class="col-lg-7 col-md-7 col-sm-12">
        <h4 class="mb-3">{{ userInfo.name }} 的档案</h4>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="profile-banner">
      <div class='profile-background-cover border border-4 border-dark-subtle'>
        <div class="profile-background" :style="{backgroundImage: `url(${host_custom+'/pfp/'+userInfo.avatar})`}"></div>
      </div>
      <div class="col-lg-3 avatar-container animate__animated animate__faster animate__flipInX position-relative">
        <img :src="host_custom+'/pfp/'+userInfo.avatar" alt="pfp" class="rounded-circle border border-4 border-dark-subtle profile-avatar">
        <br>
      </div>
    </div>

    <div class="content">
      <div class="row">
        <div class="col-lg-3">
          <div class="text-center" style="margin-top:120px">
            <ul class="list-group animate__animated animate__faster animate__flipInX">
              <li class="list-group-item">
                <p class="m-0 position-relative">
                  {{userInfo.name}}
                </p>
              </li>
              <li class="list-group-item">
                <font-awesome-icon :icon="['fas', 'fa-location-dot']"/>&ensp;
                <span class="region">未知</span>
              </li>
              <li class="list-group-item">
                <font-awesome-icon :icon="['fas', 'fa-calendar-days']"/>&ensp;
                <span class="join_time">{{new Date(userInfo.create_time).toLocaleDateString()}} 加入</span>

              </li>
              <li class="list-group-item text-secondary">
                N/A
              </li>
            </ul>
            <div class="row">
              <div class="col mt-2">
                <button type="button" v-if="!isFriend.count" @click.prevent="addFriend" class="w-100 btn-sm btn btn-primary text-nowrap animate__animated animate__faster animate__bounceIn">
                  <font-awesome-icon :icon="['fas', 'user-plus']" />
                  添加好友
                </button>

                <button type="button" v-if="isFriend.count" class="w-100 btn btn-primary btn-sm text-nowrap animate__animated animate__faster animate__bounceIn">
                  <font-awesome-icon :icon="['far', 'message']" />
                  发消息
                </button>
              </div>

              <div class="col mt-2">
                <button type="button" class="w-100 btn btn-warning btn-sm text-nowrap animate__animated animate__faster animate__bounceIn">
                  <font-awesome-icon :icon="['fas', 'warning']" />
                  举报
                </button>
              </div>

              <div class="col mt-2" v-if="isFriend.count">
                <button type="button" class="w-100 btn btn-danger btn-sm text-nowrap animate__animated animate__faster animate__bounceIn">
                  <font-awesome-icon :icon="['fas', 'circle-xmark']" />
                  删除好友
                </button>
              </div>
            </div>
          </div>
        </div>


        <div class="col-lg-9">
          <ul class="nav nav-tabs mt-3" id="profileTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">
                状态
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">
                成就
              </button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">
                留言
              </button>
            </li>
          </ul>
          <div class="tab-content" id="profileTabContent">
            <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0"></div>
            <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0"></div>
            <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <br>
  <br>
  <br>
</template>

<script setup>
import 'animate.css'
import {host_custom} from "@/host.js";
import {onMounted, ref} from "vue";
import axios from "axios";
import {useRoute} from "vue-router";
import {userStore} from "@/stores/userStore.js";
import { useSocket } from "@/socket.js";
import { friendService } from "@/service/friendService.js";
import router from "@/router/index.js";

const userAction = userStore()

const userInfo = ref({})
const route = useRoute();
const id = ref(parseInt(route.params.id))
const isFriend = ref(false)

const addFriend = async () => {
  await friendService().sendFriendRequest(id.value)
}

const checkRelationship = async () => {
  const res = await axios.get(host_custom+'/checkRelationship', {params: {uid_1: userAction.userInfo.id, uid_2: id.value}})
  if (res.status === 200) {
    const [rs] = res.data
    isFriend.value = rs
  }
}

onMounted(async () => {
  await checkRelationship()
  const res = await axios.get(host_custom+'/checkUserProfile', {params: {uid: id.value}})
  const [val] = res.data
  userInfo.value = val
})

</script>

<style scoped>
.profile-banner {
  width: 100%;
  height: 300px;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  position: relative;
}

.profile-background-cover {
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.profile-background {
  position: relative;
  width: 105%;
  height: 105%;
  background-position: 50% 50%;
  filter: blur(12px);
  background-size: cover;
  animation: bgmv-eff1 16s ease infinite;
}

@keyframes bgmv-eff1 {
  0%, 100% {background-position: 50% 50%}
  15% {background-position: 51% 51%; transform: rotate(1deg)}
  25% {background-position: 49% 53%; transform: rotate(-1deg);}
  35% {background-position: 51% 51%; transform: scale(1.05);}
  60% {background-position: 51% 53%; transform: scale(1.08) rotate(-2deg)}
  80% {background-position: 51% 52%; transform: scale(1) rotate(2deg)}
  90% {background-position: 51% 51%;}
}

.avatar-container {
  height: 300px;
  text-align: center;
}

.profile-avatar {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 196px auto 0;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  user-select: none;
}

</style>